<template>
	<view class="container">
		<!-- 商品详情 -->
		<view class="product-detail d-flex flex-column bg-white m-t-20 p-20 ">
			<view class="m-b-40">商品详情</view>
			<view class="list">
				<view v-for="(item,index) in order.items" :key="index" class="item d-flex flex-row justify-content-between align-items-center m-b-30">
					<view class="w-80 d-flex flex-column">
						<view>{{item.product.name}}</view>
						<view class="font-color-gray font-size-24">{{item.prop_text}}</view>
					</view>
					<view class="w-20 d-flex flex-row justify-content-between">
						<view class="font-size-24">x{{item.quantity}}</view>
						<view class="">￥{{item.total_price}}</view>
					</view>
				</view>
			</view>
			<view class="d-flex flex-row justify-content-end">
				<view class="font-color-gray font-size-32">总计：</view>
				<view class="font-size-32 font-color-red">￥{{order.total_price||0}}</view>
			</view>
		</view>
		
		<!-- 客户信息 -->
		<view class="d-flex flex-column bg-white m-t-20 p-20">
			<view class="d-flex flex-row justify-content-between align-items-center m-b-30">
				<view>取餐时间</view>
				<view class="d-flex flex-row font-color-theme">
					<picker mode="time" 
						:value="form.time" 
						:start="time_limit.start" 
						:end="time_limit.end" 
						@change="bindTimeChange">
						<view class="uni-input">{{form.time||'请选择就餐时间'}}</view>
					</picker>
				</view>
			</view>
			
			<view class="d-flex flex-row justify-content-between align-items-center m-b-30">
				<view>联系方式</view>
				<view class="d-flex flex-row  font-color-theme">
					<input v-model="form.tel" placeholder="请输入联系方式" type="number" placeholder-class="font-color-theme" class="text-right" />
				</view>
			</view>
			
			<view class="d-flex flex-row justify-content-between align-items-center m-b-30">
				<view>就餐人数</view>
				<picker @change="bindPickerChange" :value="form.diner_quantity" :range="diner_quantity_map"  class="w-50 text-right font-color-theme"  placeholder="请选择就餐人数">
					<view class="uni-input">{{form.diner_quantity}}&nbsp;人</view>
				</picker>
			</view>
			
			<view class="d-flex flex-row justify-content-between align-items-center m-b-30">
				<view>备注</view>
				<textarea v-model="form.memo" placeholder="请输入您的口味要求" auto-height placeholder-class="font-color-theme" class="text-right font-color-theme" />
			</view>
		</view>
		
		<!-- 支付方式 -->
		<view class="d-flex flex-column bg-white m-t-20 p-20">
			<view class="m-b-40">支付方式</view>
			<view class="d-flex flex-row justify-content-between align-items-center m-b-30">
				<view class="d-flex flex-row align-items-center">
					<image class="wx-pay-img" src="../../static/wx-pay.png"></image>
					<view class="m-l-20">微信支付</view>
				</view>
				<view>
					<image class="pay-selected" src="../../static/selected.png"></image>
				</view>
			</view>
			
			<view class="d-flex flex-row justify-content-between align-items-center m-b-30">
				<view class="d-flex flex-row align-items-center">
					<image class="member-pay-img" src="../../static/member.png"></image>
					<view class="m-l-20">会员卡支付</view>
				</view>
				<view>
				</view>
			</view>
		</view>
		
		<view style="width: 100vw;height: 150rpx;"></view>
		
		<!-- 确认支付 -->
		<view class="footer d-flex flex-row justify-content-between align-items-center bg-white">
			<view class="p-l-20">付款</view>
			<view class="d-flex flex-row align-items-center">
				<view class="m-r-30  font-color-red">￥{{order.total_price}}</view>
				<view @click="pay()" class="bg-theme font-color-white p-20 p-r-40 p-l-40">确认支付</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getPaymentOrder,submitPayment} from '../../api/order.js'
	
	export default {
		name:'pay',
		data() {
			return {
				order_id: 0,
				order: {},
				time_limit: {
					start: '08:00',
					end: '20:00'
				},
				diner_quantity_map: [1,2,3,4,5,6,7,8,9,10,12,15,18,20],
				form: {
					order_id: 0,
					time: '',
					diner_quantity: 1,
					memo:'',
					tel:'',
				}
			}
		},
		onLoad(options) {
			this.order_id = options.order_id;
			this.form.order_id = this.order_id;
			this.init();
		},
		methods: {
			init(){
				getPaymentOrder({order_id: this.order_id})
				.then((res) => {
					this.order = res;
				})
				.catch((res) => {
					
				})
				
				//初始化可选时间
				var date = new Date();
				var min = date.getMinutes();
				date.setMinutes(min + 20);
				var mindate = date.getMinutes();
				if(mindate < 10){
				    mindate = '0' + date.getMinutes();
				}
				var tea_time = date.getHours() + ':' + mindate;
				this.form.time = tea_time;
				this.time_limit.start = tea_time;
			},
			bindTimeChange: function(e) {
				this.form.time = e.target.value
			},
			bindPickerChange: function(e) {
				this.form.diner_quantity = e.target.value
			},
			pay(){
				submitPayment(this.form)
				.then(res => {
					uni.switchTab({
						url:'../order/order'
					})
				})
				.catch(res =>{
					console.log(res);
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		font-size: 28rpx;
	}
	.wx-pay-img {
		width: 40rpx;
		height: 40rpx;
	}
	.member-pay-img {
		width: 40rpx;
		height: 30rpx;
	}
	.pay-selected {
		width: 50rpx;
		height: 50rpx;
	}
	.footer {
		width: 100vw;
		
		position: fixed;
		bottom: 0;
		right: 0;
	}
</style>
